<template>
  <div class="axiom-title">
    <component 
      :is="tagName" 
      :class="titleClass"
    >
      {{ title }}
    </component>
    <p v-if="description" class="axiom-title__description">
      {{ description }}
    </p>
  </div>
</template>

<script>

export default {
  name: 'AxiomTitle',
  props: {
    // 标题文本
    title: {
      type: String,
      required: true,
    },
    // 标题级别 (1-6)
    level: {
      type: [Number, String],
      default: 2,
      validator: (value) => [1, 2, 3, 4, 5, 6].includes(Number(value)),
    },
    // 描述文本（可选）
    description: {
      type: String,
      default: '',
    },
    // 标题类型：section(区块标题), page(页面标题), component(组件标题), card(卡片标题)
    type: {
      type: String,
      default: 'section',
      validator: (value) =>
        ['section', 'page', 'component', 'card'].includes(value),
    },
    // 自定义样式类
    customClass: {
      type: String,
      default: '',
    },
  },
  computed: {
    // 计算标签名
    tagName() {
      return `h${this.level}`
    },
    // 计算标题样式类
    titleClass() {
      const classes = ['axiom-title__main']
      classes.push(`axiom-title--${this.type}`)
      if (this.customClass) {
        classes.push(this.customClass)
      }
      return classes.join(' ')
    },
  },
  created() {
    // this.$logger.debug('AxiomTitle 组件初始化')
  },
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-title';
</style>